<template>
  <div >
    <span class="tjsqstyle">
      <p class="shenqing">已添加物料</p>
      <el-form :model="queryParams" ref="queryForm" :inline="true" style="margin-left: 15px" :rules="rules" >
        <el-form-item label="申请名称" label-width="80px">
          <el-input
            v-model="queryParams.pickName"
            placeholder="请输入申请名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="申请月份" prop="planMonth" >
          <el-date-picker
            v-model="queryParams.planMonth"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            size="small"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="仓库" prop="wnameSJ">
            <el-select :disabled="bukedianji" size="small" v-model="queryParams.wnameSJ" placeholder="请选择上级仓库"  style="width: 199px;" ref="selectReport">
              <el-option :value="queryParams.id" :label="queryParams.wname" style="width:199px;height:200px;overflow: auto;background-color:#fff">
                <el-tree
                  highlight-current
                  :data="reportData"
                  :props="defaultProps"
                  @node-click="handleNodeClickSJ"
                ></el-tree>
              </el-option>
            </el-select>
         </el-form-item>

      </el-form>

      <div style="margin-left: 15px;margin-bottom: 15px">
        <el-button type="primary"  icon="el-icon-plus" size="mini" @click="choose">选择</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
         <el-button type="success"  icon="el-icon-plus" size="mini" @click="tijiao" style="width: 100px">提交</el-button>
      </div>

      <el-table  :data="queryParams.wzPickingApplyInfos" stripe style="margin-left: 15px;width: 90%"
                 @selection-change="handleSelectionChange"
                 border>
        <el-table-column align="center" type="selection" width="80"></el-table-column>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="物料分类" property="typeName"  width="200" ></el-table-column>
        <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料名称"  property="mname"  ></el-table-column>
        <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
        <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
        <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>

        <el-table-column align="center" label="计划数"  property="demandNum"  >
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.demandNum" placeholder="" @input="keydownBtn(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="入库数量"  property="inventory"  ></el-table-column>
        <el-table-column align="center" label="用途"  property="useing"  ></el-table-column>
        <el-table-column align="center" label="备注"  property="remark"  ></el-table-column>

      </el-table>
    </span>
    <wizuAdd-Dialog :addProductData="transmitData" v-if="addshow" @addProductBack="callback"></wizuAdd-Dialog>

  </div>
</template>

<script>
  import wizuAddDialog from "../../suppliesLLGL/wlsqAdd";
  import request from '@/utils/request'
  export default {
    name: "Role",
    components:{
      wizuAddDialog,
    },
    data() {
      return {
        bukedianji:false,
        // 表单校验
        rules: {
          // pickName: [
          //   { required: true, message: "申请名称不能为空", trigger: "blur" }
          // ],
          wnameSJ: [
            { required: true, message: "仓库不能为空", trigger: "blur" }
          ],
          planMonth: [
            { required: true, message: "申请月份不能为空", trigger: "blur" }
          ],
        },
        reportData:[],
        defaultProps: {
          children: "childList",
          label: "wname"
        },
        banzuArr:[],//班组数据
        zjlyArr:[],
        queryParams:{
          id:'',
          waId:'',//仓库id
          pickName:'',
          useing:'',
          planMonth:'',
          note:'',
          teamId:'',
          wnameSJ:'',
          moneySource:'',
          wzPickingApplyInfos:[]
        },
        addshow:false,
        transmitData:{},//传给子集的数据
        shuliangSum:0,//总数量
        jinesum:0,//总金额
        tableDataxunz:'',
        dialogVisible:false,
        //是否配送
        statusOptions:[
          {value:'1',label:'是'},
          {value:'2',label:'否'}
        ],
        optionsleixing:[
          {value:'1',label:'设备采购'},
          {value:'2',label:'备件消耗材料采购'}
        ],//类型数据

        optionscgzq:[//采购周期
          {value:'1',label:'年'},
          {value:'2',label:'季'},
          {value:'3',label:'月'}
        ],
        //单位数据
        optionsdanwei:[
          {value:'1',label:'支'},
          {value:'2',label:'桶'},
          {value:'3',label:'箱'},
          {value:'4',label:'把'},
          {value:'5',label:'克'},
          {value:'6',label:'卷'},
        ],
        //总数居
        shenqingxinxi:{
          inputBiaoTi:'ceshi',//标题
          leixngXL:'1',//类型下拉
          cgzq:'1',//采购周期
          nianfen:'',//年份
          jidu:'',//季度
          beizhu:'',//备注
        },
        //采购信息
        caigouxinxi: {
          inputBiaoTi:'',//标题
          ghsj:'',//供货时间
          cgjh:'',//采购计划
          gouzhiliyou:'',//购置理由
          beizhu:'',//备注
        },
        tableDatajihuaXZ:[],//选中的数据
        leixng:'post',
      };
    },

    created() {
      this.getTreeselect()
      //资金来源
      this.getDicts("sources_of_funding").then(response => {
        this.zjlyArr = response.data;
        console.log('response.data',response.data)
      });
      this.getBanzu()
      this.leixng = this.$route.query.leixng
      console.log('接收参数',this.$route.query)
      if(this.leixng=='put'){
        debugger
        this.queryParams.pickName = this.$route.query.row.pickName
        this.queryParams.useing = this.$route.query.row.useing
        this.queryParams.planMonth = this.$route.query.row.planMonth
        this.queryParams.note = this.$route.query.row.note
        this.queryParams.teamId = this.$route.query.row.teamId
        this.queryParams.moneySource = this.$route.query.row.moneySource
        this.queryParams.id = this.$route.query.row.id
        this.queryParams.waId = this.$route.query.row.waId
        this.queryParams.wnameSJ = this.$route.query.row.waName
        this.queryParams.depId = this.$route.query.row.depId
        this.queryParams.wzPickingApplyInfos = this.$route.query.row.wzPickingApplyInfos
        console.log('111',this.queryParams.wzPickingApplyInfos)
        // if(this.queryParams.wzPickingApplyInfos.length>0){
        //   this.bukedianji=true
        // }else {
        //   this.bukedianji=false
        // }
      }
    },
    methods: {
      getTreeselect() {
        request({
          url: '/system/warehouse/listTree',
          method: 'get',
        }).then(response => {
          this.reportData =  response.data;
        });
      },
      handleNodeClickSJ:function(node){
        console.log(node,'node')
        this.queryParams.waId = node.id
        this.queryParams.wnameSJ = node.wname
        this.$refs.selectReport.blur()
      },
      //键盘按下事件
      keydownBtn:function(row){
        if(row.demandNum>row.inventory){
          row.demandNum= row.inventory
        }
      },
      //班组数据
      getBanzu:function(){
        request({
          url: '/system/dept/listSubordinates',
          method: 'get',
        }).then(response => {
          this.banzuArr = response.data
        });

      },
      //弹框关闭回调函数
      callback:function(msg){
        this.addshow= false
        this.queryParams.wzPickingApplyInfos =  this.queryParams.wzPickingApplyInfos.concat(msg)
        if(this.queryParams.wzPickingApplyInfos.length>0){
          this.bukedianji=true
        }else {
          this.bukedianji=false
        }
        console.log('返回数据',msg)
      },

      //表格复选框监听
      handleSelectionChange:function(row){
        this.tableDatajihuaXZ = row
        console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

      },
      //类型监听
      leixingchange:function(row){
        console.log('row',row)

      },
      //删除
      deleteBtn:function () {
        for (var i=0;i< this.queryParams.wzPickingApplyInfos.length;i++){
          for(var j=0;j<this.tableDatajihuaXZ.length;j++){
            if(this.queryParams.wzPickingApplyInfos[i].index==this.tableDatajihuaXZ[j].index){//相等
              this.queryParams.wzPickingApplyInfos.splice(i,1)
            }

          }
        }
        debugger
        if(this.queryParams.wzPickingApplyInfos.length>0){
          this.bukedianji=true
        }else {
          this.bukedianji=false
        }
        this.fuzhiIndex()
      },
      //重新赋值index
      fuzhiIndex:function(){
        for (var i=0;i<this.queryParams.wzPickingApplyInfos.length;i++){
          this.queryParams.wzPickingApplyInfos[i].index =i
        }
      },
      //选择
      choose:function () {
        debugger
        if(!this.queryParams.wnameSJ){
          this.$message({
            type: 'warning',
            message: '请选择仓库！'
          });
          return
        }
        this.addshow=true
        var pp={
          id:this.queryParams.waId
        }
        this.transmitData=pp

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      tijiao:function () {

        // if(this.queryParams.pickName==''){
        //   this.$message({
        //     type: 'warning',
        //     message: '申请名称不能为空！'
        //   });
        //   return
        // }
        if(this.queryParams.planMonth==''){
          this.$message({
            type: 'warning',
            message: '申请月份不能为空！'
          });
          return
        }
        if(this.queryParams.wnameSJ==''){
          this.$message({
            type: 'warning',
            message: '请选择仓库！'
          });
          return
        }
        request({
          url: '/material/apply',
          method: this.leixng,
          data:this.queryParams
        }).then(response => {
          this.$router.push({path:'/suppliesLLGL/quduishenqing'});
        });

      },


    }
  };
</script>
<style scoped>
  .tjsqstyle .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }



</style>

